<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import HotBook from "@/components/HotBook.vue";
import { useRouter } from "vue-router";
const router = useRouter();

const activeName = ref("1");
// 存储书籍主题数据
let subjectList = ref([]);
// 当前显示的图片索引
let currentIndex = ref(0);

// 获取书籍主题
const getSubjects = async () => {
  try {
    const res = await axios.get("/api/booksSubject");
    console.log("Subjects API response:", res.data);

    if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
      subjectList.value = res.data.data.map((subject) => {
        // 处理双引号问题，确保数据格式正确
        return {
          ...subject,
          sub_img: subject.sub_img ? subject.sub_img.replace(/"/g, "") : "",
          bgImg: subject.bgImg ? subject.bgImg.replace(/"/g, "") : "",
          bgColor: subject.bgColor ? subject.bgColor.replace(/"/g, "") : "",
          titleColor: subject.titleColor
            ? subject.titleColor.replace(/"/g, "")
            : "",
        };
      });
      console.log("Processed subjects:", subjectList.value);
    } else {
      console.error(
        "Failed to load subjects or empty data, using default data"
      );
      setDefaultSubjects();
    }
  } catch (err) {
    console.error("Error loading subjects, using default data:", err);
    setDefaultSubjects();
  }
};

// 设置默认的主题数据
const setDefaultSubjects = () => {
  subjectList.value = [
    {
      sub_id: 1,
      sub_name: "不止魔幻：拉美文学世界",
      sub_img:
        "https://imgt.bookschina.com/2024/9/1c59c596-943e-474a-a7bd-ffca382ae61b.jpg",
      bgImg:
        "https://imgt.bookschina.com/2024/9/f20e4e4c-05aa-42b5-adfa-b0aac727926a.jpg",
      bgColor: "#f9d8be",
      titleColor: "#ba3119",
    },
    {
      sub_id: 2,
      sub_name: "当她们觉醒 女性主义的思与行",
      sub_img:
        "https://imgt.bookschina.com/2024/7/5431e172-ebb4-42d1-a385-d466e83192f6.jpg",
      bgImg:
        "https://imgt.bookschina.com/2024/7/229e0324-17c4-4f4b-ac8d-b8589ce33089.jpg",
      bgColor: "#ffc8be",
      titleColor: "#aa483e",
    },
    {
      sub_id: 3,
      sub_name: "她决定变成一棵树",
      sub_img:
        "https://imgt.bookschina.com/2024/10/4645d29d-c44d-45ff-b8d3-17a7b2dca2c0.jpg",
      bgImg:
        "https://imgt.bookschina.com/2024/10/9233e69d-9c70-48ab-bb6a-77066183a5e9.jpg",
      bgColor: "#fff1de",
      titleColor: "#db500b",
    },
    {
      sub_id: 4,
      sub_name: "书里",
      sub_img:
        "https://imgt.bookschina.com/2021/7/31c3b1ac-97ed-41d1-8ffc-0f05ed5eb445.jpg",
      bgImg:
        "https://imgt.bookschina.com/2021/7/ca403d39-1c9d-4775-b9a2-90037b226924.jpg",
      bgColor: "#c3f3f9",
      titleColor: "#2a315e",
    },
  ];
  console.log("Using default subjects:", subjectList.value);
};

// 定时切换轮播图
setInterval(() => {
  if (subjectList.value.length > 0) {
    currentIndex.value = (currentIndex.value + 1) % subjectList.value.length;
  }
}, 3000);

// 导航到主题详情页
function toTopicBlock(index) {
  router.push({
    path: "/topicBlock/" + index,
  });
}

// 组件挂载时加载数据
onMounted(() => {
  getSubjects();
});
</script>

<template>
  <!-- 轮播区域 -->
  <div class="banner">
    <!-- 左侧手风琴 -->
    <div class="collapse">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          v-for="(subject, index) in subjectList"
          :key="index"
          :title="subject.sub_name"
          :name="String(index + 1)"
        >
          <div @click="toTopicBlock(index)" style="cursor: pointer">
            <img :src="subject.sub_img" alt="" />
          </div>
        </el-collapse-item>

        <!-- 如果没有数据或正在加载时显示占位内容 -->
        <el-collapse-item
          v-if="subjectList.length === 0"
          title="加载中..."
          name="loading"
        >
          <div class="loading-placeholder">正在加载主题数据...</div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 右侧轮播图 -->
    <div class="text-center bannerList">
      <el-carousel
        height="360px"
        motion-blur
        indicator-position="outside"
        v-if="subjectList.length > 0"
      >
        <el-carousel-item v-for="(subject, index) in subjectList" :key="index">
          <a @click="toTopicBlock(index)" style="cursor: pointer">
            <img
              :src="subject.sub_img || subject.bgImg"
              :alt="subject.sub_name"
              style="width: 100%; height: 100%; object-fit: cover"
            />
          </a>
        </el-carousel-item>
      </el-carousel>

      <div v-else class="loading-carousel">
        <el-skeleton :rows="5" animated />
      </div>
    </div>

    <!-- 热门书籍 -->
    <HotBook></HotBook>
  </div>
</template>

<style scoped>
/* /////////////////// */
.banner {
  position: relative;
  width: 1200px;
  margin: auto;
}
.collapse {
  width: 22%;
  border: 2px solid rgb(213, 6, 6);
  /* float: left; */
  position: absolute;
  left: 0;
}
.bannerList {
  width: 77%;
  margin-top: 8px;
  display: inline-block;
  position: absolute;
  right: 0;
}

.demonstration {
  color: var(--el-text-color-secondary);
}
.el-collapse-item {
  position: relative;
  padding-left: 10px;
  background-color: #fff;
}
.el-collapse-item img {
  height: 100%;
  position: absolute;
  top: -0;
  left: 0;
}
.el-collapse-item__content {
  padding-bottom: 0px !important;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.loading-placeholder {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.loading-carousel {
  height: 360px;
  background-color: #f0f2f5;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
</style>
